<template lang="pug">
  div.table-empty
    s-table(
      ref="table"
      :reqUrl="reqUrl"
      :column="tableObj.column"
      :filterProps="{ fields: tableObj.searchField }"
    )
      .table-operator(slot="table-operator")
        el-button.gradientVertical(size="large" round @click="actionHandle({}, 'add')") 添加
      template(slot="action" slot-scope="text, scope")
        el-link( @click="actionHandle(scope, 'view')" type="primary") 查看
        el-link( @click="actionHandle(scope, 'edit')" type="primary") 编辑
        el-popconfirm(
            title="您确认要删除该项?"
            @confirm="() => actionHandle(scope, 'delete')"
            @onConfirm="() => actionHandle(scope, 'delete')"
          )
            el-link(slot="reference" type="danger") 删除
    modal-form(
      :visible.sync="addObj.visible"
      title="收费项目"
      width="640px"
      :fields="addFields"
      labelWidth="140px"
      :submitHandle="addSubmit"
      :submitting="addSubmitting"
      :disabled="addObj.type === 'view'"
      :layoutCol="{ sm: 24, md: 24, lg: 24 }"
    )
</template>
<script>
import { seachConfig, column } from './config'

export default {
  name: 'FinanceChargeProjectSet',
  data () {
    return {
      tableObj: {
        column,
        searchField: seachConfig
      },
      addObj: {
        row: {},
        visible: false,
        type: 'add'
      },
      addSubmitting: false
    }
  },
  computed: {
    reqUrl () {
      return ''
    },
    addFields () {
      const {
        addObj: { row }
      } = this
      return [
        {
          key: 'name',
          label: '收费项目名称',
          rules: [{ required: true, message: '请输入' }],
          initialValue: row.name
        },
        {
          key: 'amount',
          label: '收费金额',
          type: 'numer',
          rules: [{ required: true, message: '请输入' }],
          initialValue: row.amount,
          fieldProps: {
            precision: 0.01
          }
        },
        {
          key: 'type',
          label: '项目归类',
          initialValue: row.type,
          type: 'select',
          fieldProps: {
            dictKey: 'relationships',
            props: { value: 'value', label: 'label' }
          }
        },
        {
          key: 'chargeType',
          label: '缴费类型',
          type: 'radio',
          rules: [{ required: true, message: '请输入' }],
          initialValue: row.chargeType,
          fieldProps: {
            dictKey: 'classCategory',
            props: { value: 'value', label: 'label' }
          }
        },
        {
          key: 'scope',
          label: '收费项生效范围',
          type: 'radio',
          initialValue: row.scope,
          fieldProps: {
            dictKey: ''
          }
        },
        {
          key: 'remark',
          label: '项目说明',
          type: 'textarea',
          initialValue: row.remark,
          fieldProps: {
            maxlength: 300
          }
        }
      ]
    }
  },
  methods: {
    actionHandle (row, type) {
      if (type === 'delete') {
        // 删除
        return
      }
      this.addObj = {
        type,
        row,
        visible: true
      }
    },
    addSubmit (values) {
      console.log(values)
    }
  }
}
</script>
<style lang="scss" scoped>
.table-operator{
  margin-bottom: 18px
}
::v-deep{
  .tableWrapper{
    padding: 0
  }
}
</style>
